前端开发者最先接触到的布局方式就是 “传统盒模型（Box Model）”：
width、height、padding、border、margin 决定一个元素最终占多久、占多大。

但当布局变复杂，你开始使用 Flex 或 Grid 时，会发现这些属性表现得“不一样了”。

很多人学不透 Flex/Grid 的根源只有一个：

没有从“传统盒模型”这个最熟悉的角度对比理解。

这篇文章通过 可视化图示 + 对比表 + 实例代码
让你彻底理解：

  • 传统盒模型控制什么？

  • Flex 影响什么？

  • Grid 又影响什么？

让三者的差异一眼就懂。

一、传统盒模型（Box Model）：元素自己决定一切

1. 它控制的是“元素自身的占位和尺寸”

默认盒模型下：

  • width = 元素内容宽度

  • height = 元素内容高度

  • padding = 往内挤

  • border = 外层边框

  • margin = 把元素往外推

图示如下：

[ margin ]
  [ border ]
    [ padding ]
      [ content (width / height) ]

📌 谁设置了属性，谁就影响自身。
不会影响其他元素的尺寸，也不会被父元素重新分配宽度。

这是传统盒模型最稳定的地方。

二、Flex：开始影响“内容的最终尺寸与分布”

Flex 做的不是布局结构，而是 控制内容之间如何伸缩、排列、分配剩余空间。

Flex 的本质：决定子元素最终的宽高，而不是格子的结构。

1. 子元素的 width 不再是最终宽度

例如：

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
</div>

.container {
  display: flex;
}
.item {
  width: 200px;
}

你以为 A 和 B 都是 200px？

错！如果父容器宽度不足，它们可能被压缩。

因为 Flex 的子项默认：

flex-shrink: 1; /* 允许压缩 */

📌 传统盒模型 width = 绝对宽度
Flex 中 width = 建议宽度

2. 子元素可以被拉伸（flex-grow）

.item {
  flex-grow: 1; /* 抢剩余空间 */
}

如果有 3 个子元素，每个都 grow=1：

---------------------------------
| item | item | item | （等分）
---------------------------------

传统布局做不到这一点。

3. margin:auto 会吸收剩余空间

例如：

.right {
  margin-left: auto;
}

右侧元素会被推到最右边：

[A]                [B]

传统盒模型没有这种行为。

4. 高度也能被拉伸

Flex 默认会让子元素在侧轴方向拉伸：

align-items: stretch;

如果父级是 height: 200px，子元素会自动高度拉满。

三、Grid：开始影响“布局结构（格子）”本身

Grid 的本质，是 父级先把行列格子定好，子元素只是格子里的内容。

Grid 控制的是：布局结构（行 + 列）
而不是内容本身。

1. 父级决定行列结构（子元素无法改变）

例如：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

这表示：

|——1fr——|————2fr————|——1fr——|

无论子元素写什么宽度，这三个格子的列宽都不会改变。

2. 子元素 width/height 不改变格子大小

.item {
  width: 500px;
}

格子仍然保持 1fr 的比例。
子元素只是在格子里溢出或压缩。

📌 这是 Grid 与 Flex 最大的区别：
Flex：子元素影响最终宽度
Grid：子元素无法影响布局结构

3. 子元素可以跨行跨列（布局能力）

.item {
  grid-column: span 2;
}

图示：

┌──────────────┬──────┐
│     span2    │ item │
├──────────────┼──────┤
│    item      │ item │
└──────────────┴──────┘

Flex 无法做到这种二维布局。

四、传统盒模型 vs Flex vs Grid —— 最直观对比图

传统盒模型 —— 控制元素自身
┌───────────┐
│ 我就是这么大 │ ← width/padding/border 决定
└───────────┘


Flex —— 控制子内容的最终尺寸与分布
|— item（被拉伸） —|— item（被压缩） —|


Grid —— 控制布局格子结构
┌──────┬────────┬──────┐
│ item │  item   │ item │ ← 格子由父级决定
└──────┴────────┴──────┘

五、最重要的三句话总结（建议放文章开头或结尾）

✔ 传统盒模型：

控制“元素自身的盒子大小”

✔ Flex：

控制“子元素如何伸缩、分配空间、排列顺序”

✔ Grid：

控制“布局结构（行列格子）”，子内容只是被放进去

理解这三点，整个 CSS 布局体系就通透了。

六、完整结语

盒模型、Flex 和 Grid 并不是互相替代的关系，而是作用层级不同：

  • 盒模型解决“元素自己长什么样”

  • Flex解决“一行/一列中内容如何伸缩排列”

  • Grid解决“整个页面如何划分结构”

掌握它们之间的关系，会让你的布局代码更稳定、思路更清晰，也更容易从设计稿映射到代码。

本文部分内容借助 AI 辅助生成，并由作者整理审核。